<script setup>
import { ref } from 'vue'
//列表
const items = ref([{
  id: '1',
  confname: 'test',
  host: '127.0.0.1',
  port: '3306',
  username: 'root',
  password: '123456',
  charset: 'utf8mb4',
  collation: 'utf8mb4_general_ci',
  prefix: 'test_',
  tables: [
    {
      tableName: "adsadas"
    },
    {
      tableName: "adsadas"
    },
    {
      tableName: "adsadas"
    },
    {
      tableName: "adsadas"
    }
  ]
}])

/**
 * 列表打开
 */
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
/**
 * 列表关闭
 */
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-aside width="200px" class="unselectable">
    <el-menu @open="handleOpen" @close="handleClose">
      <el-sub-menu v-for="(item, index) in items" :key="item.id" :index="index + ''">
        <template #title>
          <el-icon>
            <Edit />
          </el-icon>
          <el-dropdown trigger="contextmenu">
            <span>{{ item.confname }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="closeConn(item)">关闭连接</el-dropdown-item>
                <el-dropdown-item @click="editConn(item)">编辑连接</el-dropdown-item>
                <el-dropdown-item>删除连接</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <el-menu-item v-for="(table, index_i) in item.tables" :key="table.tableName" class="none-user-select" :index="index + '-' + index_i">
          {{ table.tableName }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>